<template>
  <view class="candidate-container">
    <!-- 加载动画 -->
    <view class="loading-mask" v-if="isLoading">
      <view class="loading-container">
        <view class="loading-spinner"></view>
        <text class="loading-text">加载候选人中...</text>
      </view>
    </view>

    <!-- 候选人内容 -->
    <view v-if="!isLoading">
      <view class="header">
        <text class="count">共{{total}}人，已选{{selectedCount}}人</text>
        <view class="select-all-btn" @click="toggleSelectAll">{{isAllSelected ? '取消全选' : '全选'}}</view>
      </view>
      
      <view class="candidate-list">
        <!-- 候选人卡片 -->
        <view class="candidate-card" v-for="(candidate, index) in candidates" :key="index" :class="{ 'expanded': expandedIndex === index }">
          <view class="card-content">
            <!-- 头像 -->
            <image class="avatar" :src="candidate && candidate['687633c7ef700e94a0d82b59'] ? JSON.parse(candidate['687633c7ef700e94a0d82b59'])[0].DownloadUrl : '/static/logo.png'" mode="aspectFill"></image>
            <view class="info">
              <view class="name-gender">
                <!-- 姓名 -->
                <text class="name">{{candidate && candidate['686e0c6fd9147824a38a6294'] || '姓名'}}</text>
                <text class="gender female">{{ candidate && candidate['686e0c6fd9147824a38a6295'] || '♀' }}</text>
              </view>
              <view class="location">
                <!-- 角色 -->
                <text class="job">{{candidate && candidate.job || '礼仪'}}</text>
                <text class="separator">|</text>
                <!-- 接单地址 -->
                <text class="city">{{candidate && candidate['686e0f429104eb90ad4247a3'] || '---'}} · {{ candidate && candidate['686e0f429104eb90ad4247a4'] || '---' }}</text>
              </view>
            </view>
          </view>
          
          <!-- 展开后显示的内容 -->
          <view class="expanded-content" v-if="expandedIndex === index">
            <!-- 分隔线 -->
            <view class="divider"></view>
            
            <!-- 形象信息 -->
            <view class="section">
              <view class="section-title">
                <view class="section-title-bar"></view>
                <text>形象信息</text>
              </view>
              <view class="physical-info">
                <view class="info-item">
                  <text class="info-value">{{candidate['686e0f429104eb90ad4247a5'] || '---'}}cm</text>
                  <text class="info-label">身高</text>
                </view>
                <view class="info-item">
                  <text class="info-value">{{candidate['686e0f429104eb90ad4247a6'] || '---'}}kg</text>
                  <text class="info-label">体重</text>
                </view>
                <view class="info-item">
                  <text class="info-value">{{candidate['688051358c409b88b8519759'] || '---'}}</text>
                  <text class="info-label">三围</text>
                </view>
                <view class="info-item">
                  <text class="info-value">{{candidate['686e0f429104eb90ad4247a8'] || '---'}}</text>
                  <text class="info-label">鞋码</text>
                </view>
              </view>
            </view>
            
            <!-- 身份标签 -->
            <view class="section">
              <view class="section-title">
                <view class="section-title-bar"></view>
                <text>身份标签</text>
              </view>
              <view class="tags">
                <view class="tag" v-for="tag in (candidate['68a2c617703512ca0fc111e3'] || [])" :key="tag">{{ tag }}</view>
                <view class="no-tags" v-if="!candidate['68a2c617703512ca0fc111e3'] || candidate['68a2c617703512ca0fc111e3'].length === 0">
                  <text>暂无标签</text>
                </view>
              </view>
            </view>
            
            <!-- 形象照片 -->
            <view class="section">
              <view class="section-title">
                <view class="section-title-bar"></view>
                <text>形象照片</text>
              </view>
              
              <!-- 解析照片数据 -->
              <view class="photos" :class="getLayoutClass(candidate)">
                <!-- 视频 -->
                <view class="video-container" v-if="hasVideo(candidate)">
                  <video 
                    :src="getVideoUrl(candidate)" 
                    controls
                    object-fit="cover"
                    @error="videoError"
                  ></video>
                </view>
                
                <!-- 照片 -->
                <view class="photo-container" :class="{'with-video': hasVideo(candidate)}">
                  <template v-if="getPhotos(candidate).length > 0">
                    <image 
                      v-for="(photo, photoIndex) in getPhotos(candidate)" 
                      :key="photoIndex"
                      :src="photo.DownloadUrl" 
                      mode="aspectFill"
                      class="photo-item"
                      @error="photoError"
                    ></image>
                  </template>
                  <view class="no-photo" v-else>
                    <text>暂无照片</text>
                  </view>
                </view>
              </view>
              
              <view class="collapse-btn">
                <text>收起</text>
              </view>
            </view>
          </view>
          
          <view class="expand-btn" @click="toggleExpand(index)">
            <image class="icon-down" :src="expandedIndex === index ? '/static/candidate-icons/up.png' : '/static/candidate-icons/down.png'" mode="aspectFit"></image>
            <text>{{expandedIndex === index ? '收起' : '展开'}}</text>
          </view>
          <view class="checkbox" :class="{ checked: candidate && candidate['68761720096a775fc5332e94'] == '已选中' }" @click="toggleSelect(index)">
            <text v-if="candidate && candidate['68761720096a775fc5332e94'] == '已选中'" class="icon-check">✓</text>
          </view>
        </view>
      </view>
      
      <!-- 筛选条件栏 -->
      <view class="filter-bar" v-if="showFilterBar">
        <text class="filter-bar-text">筛选条件: 普通话 | 身高{{heightRange.min}}-{{heightRange.max}}cm 体重{{weightRange.min}}-{{weightRange.max}}kg</text>
      </view>
      
      <view class="footer">
        <view class="filter-btn" @click="showFilterModal = true">
          <text>条件筛选</text>
        </view>
        <view class="recommend-btn" @click="goToQuotation">
          <text>报价并推荐</text>
        </view>
      </view>
    </view>
    
    <!-- 筛选弹框 -->
    <view class="filter-modal" v-if="showFilterModal" :class="{ closing: filterModalClosing }" @click="closeFilterModal">
      <view class="filter-content" :class="{ closing: filterModalClosing }" @click.stop>
        <!-- 弹框头部 -->
        <view class="filter-header">
          <text class="filter-title">条件筛选</text>
          <view class="close-btn" @click="closeFilterModal">
            <text>×</text>
          </view>
        </view>
        
        <!-- 筛选内容 -->
        <view class="filter-body">
          <!-- 标签筛选区 -->
          <view class="tag-filter-section">
            <view class="tag-filter-header">
              <text class="tag-filter-title">标签筛选</text>
              <view class="tag-dropdown-container" @click="showTagDropdown = !showTagDropdown">
                <view class="tag-dropdown-btn">
                  <text class="tag-dropdown-text">标准普通话</text>
                </view>
                <image class="tag-dropdown-arrow" src="/static/candidate-icons/right.png" mode="aspectFit"></image>
              </view>
            </view>
          </view>
          
          <!-- 分隔线 -->
          <view class="filter-divider"></view>
          
          <!-- 条件筛选区 -->
          <view class="condition-filter-section">
            <text class="condition-filter-title">条件筛选</text>
            
            <!-- 身高筛选 -->
            <view class="slider-section">
              <view class="slider-header">
                <text class="slider-label">身高</text>
                <text class="slider-value">{{heightRange.min}} - {{heightRange.max}} CM</text>
              </view>
              <view class="slider-container">
                <view class="slider-wrapper">
                  <view class="slider-track"></view>
                  <view class="slider-range" :style="heightRangeStyle"></view>
                  <view class="slider-thumb slider-thumb-min" :style="heightMinThumbStyle" @touchstart="startDragHeight('min', $event)" @touchmove="dragHeight('min', $event)" @touchend="endDrag"></view>
                  <view class="slider-thumb slider-thumb-max" :style="heightMaxThumbStyle" @touchstart="startDragHeight('max', $event)" @touchmove="dragHeight('max', $event)" @touchend="endDrag"></view>
                </view>
                <view class="slider-values">
                  <text class="slider-min">100</text>
                  <text class="slider-max">300CM</text>
                </view>
              </view>
            </view>
            
            <!-- 体重筛选 -->
            <view class="slider-section">
              <view class="slider-header">
                <text class="slider-label">体重</text>
                <text class="slider-value">{{weightRange.min}} - {{weightRange.max}} KG</text>
              </view>
              <view class="slider-container">
                <view class="slider-wrapper">
                  <view class="slider-track"></view>
                  <view class="slider-range" :style="weightRangeStyle"></view>
                  <view class="slider-thumb slider-thumb-min" :style="weightMinThumbStyle" @touchstart="startDragWeight('min', $event)" @touchmove="dragWeight('min', $event)" @touchend="endDrag"></view>
                  <view class="slider-thumb slider-thumb-max" :style="weightMaxThumbStyle" @touchstart="startDragWeight('max', $event)" @touchmove="dragWeight('max', $event)" @touchend="endDrag"></view>
                </view>
                <view class="slider-values">
                  <text class="slider-min">30</text>
                  <text class="slider-max">100KG</text>
                </view>
              </view>
            </view>
          </view>
        </view>
        
        <!-- 弹框底部按钮 -->
        <view class="filter-footer">
          <view class="clear-btn" @click="resetFilters">
            <text>清空筛选</text>
          </view>
          <view class="confirm-btn" @click="confirmFilters">
            <text>确认</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, computed } from 'vue';
import { onLoad, onReachBottom } from '@dcloudio/uni-app'
import { apiService, ApiService } from '/pages/utils/api.js'
import { useProjectStore } from '/stores/project.js'
import { objectToUrlParams } from '/pages/utils/url.js'

const currentPage = ref(1)
const total = ref(0)
const expandedIndex = ref(-1); // 当前展开的卡片索引，-1表示没有展开的卡片

const candidates = ref();
const allCandidates = ref(); // 存储所有候选人数据，用于筛选

// 筛选弹框相关状态
const showFilterModal = ref(false);
const filterModalClosing = ref(false); // 控制关闭动画
const showTagDropdown = ref(false);
const showFilterBar = ref(false); // 控制筛选条件栏显示

// 加载状态
const isLoading = ref(true);

// 滑块范围数据
const heightRange = ref({
  min: 160,
  max: 180
});

const weightRange = ref({
  min: 45,
  max: 60
});

// 拖拽状态
const dragging = ref({
  height: null, // 'min' or 'max'
  weight: null,
  startX: 0,
  startValue: 0
});

// 存储传递过来的参数
const pageParams = ref({})

// 使用项目store
const projectStore = useProjectStore()

// 页面加载时调用API
onLoad((options) => {
  console.log('人选页面加载完成', options)
  
  // 设置导航栏标题
  projectStore.setNavigationTitle()
  
  // 保存传递过来的参数
  pageParams.value = {
    min: options.min || '',
    classify: options.classify || '',
    projectId: options.projectId || '',
    roleType: options.roleType || '',
    detailsId: options.detailsId  || '',
  }
  console.log('接收到的页面参数:', pageParams.value)
  fetchCandidateData()
})

const fetchCandidateData = async () => {
  try {
    isLoading.value = true; // 开始加载
    
    // 使用优化后的快速接口，首次加载较少数据
    const data = await apiService.getCandidatesQuick({
        pageIndex: currentPage.value,
        pageSize: 15, // 首次加载15条，提高速度
        notGetTotal: false
      })
      
      allCandidates.value = data.rows // 保存所有候选人数据
      candidates.value = data.rows
      total.value = data.total

      console.log('data:');
      console.log(data);
      
      if(data.rows[3] && data.rows[3]['688050b38c409b88b851973b']) {
        console.log(JSON.parse(data.rows[3]['688050b38c409b88b851973b'])[0].DownloadUrl);
      }
      
      // 预加载下一页数据（后台进行，不影响当前页面）
      if (currentPage.value === 1 && data.rows.length > 0) {
        setTimeout(() => {
          apiService.preloadData([{
            type: 'getFilterRows',
            params: {
              worksheetId: ApiService.WORKSHEETENUM.CANDIDATE,
              pageIndex: 2,
              pageSize: 20,
              notGetTotal: true
            }
          }])
        }, 1000)
      }
      
  } catch (error) {
    console.error('获取候选人数据失败:', error)
  } finally {
    isLoading.value = false; // 加载完成
  }
}

const isAllSelected = ref(false);

const selectedCount = computed(() => {
  if(!candidates.value) return 0;
  return candidates.value.filter(item => item['68761720096a775fc5332e94'] == '已选中').length;
});

function toggleSelect(index) {
  if(!candidates.value) return;
  const candidate = candidates.value[index];
  candidate['68761720096a775fc5332e94'] = candidate['68761720096a775fc5332e94'] == '已选中' ? '未选中' : '已选中';
  checkAllSelected();
}

function toggleSelectAll() {
  if(!candidates.value) return;
  const newState = !isAllSelected.value;
  isAllSelected.value = newState;
  candidates.value.forEach(candidate => {
    candidate['68761720096a775fc5332e94'] = newState ? '已选中' : '未选中';
  });
}

function checkAllSelected() {
  if(!candidates.value) return;
  isAllSelected.value = candidates.value.every(candidate => candidate['68761720096a775fc5332e94'] == '已选中');
}

function toggleExpand(index) {
  expandedIndex.value = expandedIndex.value === index ? -1 : index;
}

// 检查是否有视频
function hasVideo(candidate) {
  return candidate && candidate['688050b38c409b88b851973b'] && candidate['688050b38c409b88b851973b'].trim() !== '';
}

// 获取视频URL
function getVideoUrl(candidate) {
  if (!candidate || !candidate['688050b38c409b88b851973b']) {
    return '/static/logo.png'; // 默认图片
  }
  try {
    const videoData = JSON.parse(candidate['688050b38c409b88b851973b']);
    if (Array.isArray(videoData) && videoData.length > 0) {
      return videoData[0].DownloadUrl;
    }
    return '/static/logo.png'; // 默认图片
  } catch (e) {
    console.error('解析视频数据失败', e);
    return '/static/logo.png'; // 默认图片
  }
}

// 获取照片列表
function getPhotos(candidate) {
  if (!candidate || !candidate['687633c7ef700e94a0d82b59']) return [];
  try {
    const photos = JSON.parse(candidate['687633c7ef700e94a0d82b59']);
    return Array.isArray(photos) ? photos : [];
  } catch (e) {
    console.error('解析照片数据失败', e);
    return [];
  }
}

// 获取单个照片的类名
function getPhotoClass(candidate, index) {
  const hasVid = hasVideo(candidate);
  const photoCount = getPhotos(candidate).length;
  
  if (hasVid) {
    if (photoCount <= 2) {
      return `video-photo-${index}`;
    } else {
      // 有视频且照片超过2张时的布局
      if (index < 2) {
        return `video-side-${index}`;
      } else {
        return `video-bottom-${index-2}`;
      }
    }
  } else {
    if (photoCount === 1) return 'single';
    if (photoCount === 2) return `dual-${index}`;
    if (photoCount === 3) return `triple-${index}`;
    return `grid-item`;
  }
}

function photoError(e) {
  console.error('照片加载错误', e);
  uni.showToast({
    title: '照片加载失败',
    icon: 'none'
  });
}

// 获取布局类名
function getLayoutClass(candidate) {
  const hasVid = hasVideo(candidate);
  const photoCount = getPhotos(candidate).length;
  
  if (hasVid) {
    if (photoCount <= 2) {
      return 'has-video-few-photos';
    } else {
      return 'has-video-many-photos';
    }
  } else {
    if (photoCount === 0) return 'no-photos';
    if (photoCount === 1) return 'single-photo';
    if (photoCount === 2) return 'two-photos';
    if (photoCount === 3) return 'three-photos';
    return 'many-photos';
  }
}

function videoError(e) {
  console.error('视频播放错误', e);
  uni.showToast({
    title: '视频加载失败',
    icon: 'none'
  });
}

// 计算属性 - 滑块样式
const heightRangeStyle = computed(() => {
  const minPercent = ((heightRange.value.min - 100) / (300 - 100)) * 100;
  const maxPercent = ((heightRange.value.max - 100) / (300 - 100)) * 100;
  return {
    left: `${minPercent}%`,
    width: `${maxPercent - minPercent}%`
  };
});

const heightMinThumbStyle = computed(() => {
  const percent = ((heightRange.value.min - 100) / (300 - 100)) * 100;
  return {
    left: `${percent}%`
  };
});

const heightMaxThumbStyle = computed(() => {
  const percent = ((heightRange.value.max - 100) / (300 - 100)) * 100;
  return {
    left: `${percent}%`
  };
});

const weightRangeStyle = computed(() => {
  const minPercent = ((weightRange.value.min - 30) / (100 - 30)) * 100;
  const maxPercent = ((weightRange.value.max - 30) / (100 - 30)) * 100;
  return {
    left: `${minPercent}%`,
    width: `${maxPercent - minPercent}%`
  };
});

const weightMinThumbStyle = computed(() => {
  const percent = ((weightRange.value.min - 30) / (100 - 30)) * 100;
  return {
    left: `${percent}%`
  };
});

const weightMaxThumbStyle = computed(() => {
  const percent = ((weightRange.value.max - 30) / (100 - 30)) * 100;
  return {
    left: `${percent}%`
  };
});

// 筛选弹框相关函数
function closeFilterModal() {
  filterModalClosing.value = true;
  setTimeout(() => {
    showFilterModal.value = false;
    filterModalClosing.value = false;
  }, 300); // 与动画时长保持一致
}

// 身高滑块拖拽
function startDragHeight(type, event) {
  dragging.value.height = type;
  dragging.value.startX = event.touches[0].clientX;
  dragging.value.startValue = heightRange.value[type];
}

function dragHeight(type, event) {
  if (dragging.value.height !== type) return;
  
  const currentX = event.touches[0].clientX;
  const deltaX = currentX - dragging.value.startX;
  const sliderWidth = 280; // 滑块轨道宽度
  const valueRange = 300 - 100; // 数值范围
  const deltaValue = (deltaX / sliderWidth) * valueRange;
  
  let newValue = Math.round(dragging.value.startValue + deltaValue);
  newValue = Math.max(100, Math.min(300, newValue));
  
  if (type === 'min') {
    newValue = Math.min(newValue, heightRange.value.max - 1);
    heightRange.value.min = newValue;
  } else {
    newValue = Math.max(newValue, heightRange.value.min + 1);
    heightRange.value.max = newValue;
  }
}

// 体重滑块拖拽
function startDragWeight(type, event) {
  dragging.value.weight = type;
  dragging.value.startX = event.touches[0].clientX;
  dragging.value.startValue = weightRange.value[type];
}

function dragWeight(type, event) {
  if (dragging.value.weight !== type) return;
  
  const currentX = event.touches[0].clientX;
  const deltaX = currentX - dragging.value.startX;
  const sliderWidth = 280; // 滑块轨道宽度
  const valueRange = 100 - 30; // 数值范围
  const deltaValue = (deltaX / sliderWidth) * valueRange;
  
  let newValue = Math.round(dragging.value.startValue + deltaValue);
  newValue = Math.max(30, Math.min(100, newValue));
  
  if (type === 'min') {
    newValue = Math.min(newValue, weightRange.value.max - 1);
    weightRange.value.min = newValue;
  } else {
    newValue = Math.max(newValue, weightRange.value.min + 1);
    weightRange.value.max = newValue;
  }
}

function endDrag() {
  dragging.value.height = null;
  dragging.value.weight = null;
}

function resetFilters() {
  heightRange.value = { min: 160, max: 180 };
  weightRange.value = { min: 45, max: 60 };
  // 重置后显示所有数据
  candidates.value = allCandidates.value;
  showFilterBar.value = false; // 隐藏筛选条件栏
}

function confirmFilters() {
  console.log('筛选条件:', {
    height: heightRange.value,
    weight: weightRange.value
  });
  
  // 根据身高和体重筛选候选人数据
  if (allCandidates.value) {
    const filteredCandidates = allCandidates.value.filter(candidate => {
      // 获取身高数据 (字段ID: 686e0f429104eb90ad4247a5)
      const height = parseInt(candidate['686e0f429104eb90ad4247a5']);
      // 获取体重数据 (字段ID: 686e0f429104eb90ad4247a6)
      const weight = parseInt(candidate['686e0f429104eb90ad4247a6']);
      
      // 检查身高是否在范围内
      const heightInRange = !isNaN(height) && height >= heightRange.value.min && height <= heightRange.value.max;
      // 检查体重是否在范围内
      const weightInRange = !isNaN(weight) && weight >= weightRange.value.min && weight <= weightRange.value.max;
      
      return heightInRange && weightInRange;
    });
    
    candidates.value = filteredCandidates;
    console.log(`筛选完成，从${allCandidates.value.length}个候选人中筛选出${filteredCandidates.length}个符合条件的候选人`);
    showFilterBar.value = true; // 显示筛选条件栏
  }
  
  closeFilterModal();
}

// 跳转到报价页面
function goToQuotation() {
  // 检查是否有选中的候选人
  const minRequired = parseInt(pageParams.value.min) || 1 // 确保转换为数字，默认最少1个
  console.log('最少需要选择人数:', minRequired, '当前已选择:', selectedCount.value)
  
  if (selectedCount.value < minRequired) {
    uni.showToast({
      title: '请至少选择' + minRequired + '位候选人',
      icon: 'none'
    });
    return;
  }
  
  // 获取选中候选人的rowid数组
  const selectedCandidates = candidates.value.filter(candidate => 
    candidate['68761720096a775fc5332e94'] == '已选中'
  )
  const roleArr = selectedCandidates.map(candidate => candidate.rowid)
  
  console.log('选中的候选人数据:', selectedCandidates)
  console.log('选中的rowid数组:', roleArr)
  
  // 传递页面参数到报价页面
  const params = objectToUrlParams({
    roleArr: JSON.stringify(roleArr), // 将数组转换为JSON字符串传递
    min: pageParams.value.min || '',
    classify: pageParams.value.classify || '',
    projectId: pageParams.value.projectId || '',
    roleType: pageParams.value.roleType || ''
  })
  
  uni.navigateTo({
    url: `/pages/candidate/quotation?${params}`
  });
}
</script>

<style lang="scss" scoped>

.candidate-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background-color: #f5f5f5;
  padding: 10px;
  padding-bottom: 80px; /* 为固定底部留出空间 */
  box-sizing: border-box;
  
  /* 加载动画样式 */
  .loading-mask {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
  }

  .loading-container {
    background: #FFFFFF;
    border-radius: 24rpx;
    padding: 48rpx 64rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.1);
  }

  .loading-spinner {
    width: 64rpx;
    height: 64rpx;
    border: 6rpx solid #F0F0F0;
    border-top: 6rpx solid #FF6B9B;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-bottom: 24rpx;
  }

  .loading-text {
    font-size: 28rpx;
    color: #333333;
    font-weight: 500;
  }

  @keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }

  .filter-bar {
    position: fixed;
    bottom: 80px; /* 在footer上方 */
    left: 0;
    right: 0;
    height: 40px;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
    
    .filter-bar-text {
      color: #fff;
      font-size: 14px;
      text-align: center;
    }
  }
  
  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 15px;
    
    .count {
      font-size: 12px;
      color: #333;
    }
    
    .select-all-btn {
      background-color: #ff6a9c;
      color: #ffffff;
      font-size: 12px;
      padding: 3px 12px;
      border-radius: 6px;
    }
  }
  
  .candidate-list {
    flex: 1;
    
    .candidate-card {
      position: relative;
      background-color: #fff8fc;
      border-radius: 8px;
      padding: 12px;
      margin-bottom: 8px;
      display: flex;
      flex-direction: column;
      box-shadow: 0 2px 8px rgba(255, 106, 156, 0.1);
      border: 1px solid #f9cde3;
      transition: all 0.3s ease;
      
      &.expanded {
        margin-bottom: 20px;
      }
      
      .card-content {
        display: flex;
        
        .avatar {
          width: 50px;
          height: 50px;
          border-radius: 10px;
          margin-right: 12px;
        }
        
        .info {
          flex: 1;
          
          .name-gender {
            display: flex;
            align-items: center;
            margin-bottom: 4px;
            
            .name {
              font-size: 14px;
              font-weight: 500;
              color: #333;
              margin-right: 4px;
            }
            
            .gender {
              font-size: 15px;
              padding: 0 4px;
              
              &.female {
                color: #ff6a9c;
              }
            }
          }
          
          .location {
            display: flex;
            font-size: 12px;
            color: #666;
            
            .job {
              margin-right: 4px;
            }
            
            .separator {
              margin: 0 4px;
              color: #ccc;
            }
          }
        }
      }
      
      .expanded-content {
        margin-top: 12px;
        
        .divider {
          height: 1px;
          background-color: #f0f0f0;
          margin: 8px 0;
        }
        
        .section {
          margin-top: 12px;
          
          .section-title {
            display: flex;
            align-items: center;
            margin-bottom: 12px;
            
            .section-title-bar {
              width: 2px;
              height: 14px;
              background-color: #ff6a9c;
              margin-right: 6px;
              border-radius: 1px;
            }
            
            text {
              font-size: 14px;
              color: #333;
              font-weight: 500;
            }
          }
          
          .physical-info {
            display: flex;
            justify-content: space-between;
            
            .info-item {
              display: flex;
              flex-direction: column;
              align-items: center;
              
              .info-value {
                font-size: 14px;
                color: #333;
                margin-bottom: 4px;
              }
              
              .info-label {
                font-size: 10px;
                color: #999;
                background-color: #f5f5f5;
                padding: 2px 6px;
                border-radius: 8px;
              }
            }
          }
          
          .tags {
            display: flex;
            flex-wrap: wrap;
            
            .tag {
              background-color: #fff;
              border: 1px solid #ddd;
              border-radius: 3px;
              padding: 4px 10px;
              margin-right: 8px;
              margin-bottom: 8px;
              font-size: 12px;
              color: #333;
            }
            .no-tags {
              font-size: 12px;
              color: #999;
              margin-top: 8px;
            }
          }
          
          .photos {
            display: flex;
            flex-direction: column;
            width: 100%;
            
            // 有视频的布局
            &.has-video {
              display: flex;
              flex-direction: row;
              justify-content: space-between;
              
              .video-container {
                width: 62%;
                height: 300px;
                border-radius: 8px;
                overflow: hidden;
                
                video {
                  width: 100%;
                  height: 100%;
                  border-radius: 8px;
                  background-color: #000;
                }
              }
              
              .photo-container {
                width: 35%;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                
                .photo-item {
                  width: 100%;
                  height: 145px;
                  border-radius: 8px;
                  margin-bottom: 10px;
                  
                  &:last-child {
                    margin-bottom: 0;
                  }
                }
              }
            }
            
            // 单张照片的布局
            &.single-photo {
              .photo-container {
                width: 100%;
                
                .photo-item {
                  width: 100%;
                  height: 300px;
                  border-radius: 8px;
                }
              }
            }
            
            // 两张照片的布局
            &.two-photos {
              .photo-container {
                width: 100%;
                display: flex;
                flex-direction: row;
                justify-content: space-between;
                
                .photo-item {
                  width: 49%;
                  height: 300px;
                  border-radius: 8px;
                }
              }
            }
            
            // 三张照片的布局
            &.three-photos {
              .photo-container {
                width: 100%;
                display: flex;
                flex-wrap: wrap;
                justify-content: space-between;
                
                .photo-item {
                  border-radius: 8px;
                  
                  &.triple-0 {
                    width: 100%;
                    height: 200px;
                    margin-bottom: 10px;
                  }
                  
                  &.triple-1, &.triple-2 {
                    width: 49%;
                    height: 150px;
                  }
                }
              }
            }
            
            // 多张照片的布局
            &.many-photos {
              .photo-container {
                width: 100%;
                display: flex;
                flex-wrap: wrap;
                justify-content: space-between;
                
                .photo-item {
                  width: 32%;
                  height: 120px;
                  border-radius: 8px;
                  margin-bottom: 10px;
                }
              }
            }
            
            // 无照片的布局
            &.no-photos {
              .photo-container {
                width: 100%;
                height: 200px;
                display: flex;
                align-items: center;
                justify-content: center;
                background-color: #f5f5f5;
                border-radius: 8px;
                
                .no-photo {
                  color: #999;
                  font-size: 14px;
                }
              }
            }

            // 有视频且照片较少的布局（2张或以下）
            &.has-video-few-photos {
              display: flex;
              flex-direction: row;
              justify-content: space-between;
              
              .video-container {
                width: 62%;
                height: 300px;
                border-radius: 8px;
                overflow: hidden;
                
                video {
                  width: 100%;
                  height: 100%;
                  border-radius: 8px;
                  background-color: #000;
                }
              }
              
              .photo-container {
                width: 35%;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                
                .photo-item {
                  width: 100%;
                  height: 145px;
                  border-radius: 8px;
                  margin-bottom: 10px;
                  
                  &:last-child {
                    margin-bottom: 0;
                  }
                }
              }
            }
            
            // 有视频且照片较多的布局（3张或以上）
            &.has-video-many-photos {
              display: flex;
              flex-direction: column;
              
              .video-container {
                width: 100%;
                height: 240px;
                border-radius: 8px;
                overflow: hidden;
                margin-bottom: 10px;
                
                video {
                  width: 100%;
                  height: 100%;
                  border-radius: 8px;
                  background-color: #000;
                }
              }
              
              .photo-container {
                width: 100%;
                display: flex;
                flex-wrap: wrap;
                justify-content: space-between;
                
                // 视频下方的照片网格
                .photo-item {
                  width: 32%;
                  height: 100px;
                  border-radius: 8px;
                  margin-bottom: 10px;
                }
              }
            }
          }
          
          .collapse-btn {
            opacity: 0;
            text-align: center;
            margin-top: 12px;
            color: #ff6a9c;
            font-size: 12px;
          }
        }
      }
      
      .expand-btn {
        position: absolute;
        bottom: 12px;
        right: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 3px 8px;
        border: 1px solid #d5d2d4;
        border-radius: 12px;
        color: #6675a3;
        font-size: 12px;
        
        .icon-down {
          width: 12px;
          height: 12px;
          margin-right: 3px;
        }
      }
      
      .checkbox {
        position: absolute;
        top: 12px;
        right: 12px;
        width: 18px;
        height: 18px;
        border-radius: 50%;
        border: 1px solid #ddd;
        
        &.checked {
          background-color: #ff6a9c;
          border: none;
          display: flex;
          align-items: center;
          justify-content: center;
          
          .icon-check {
            color: #fff;
            font-size: 12px;
          }
        }
      }
    }
  }
  
  .footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    padding: 15px 10px;
    background-color: #fff;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
    
    .filter-btn {
      flex: 1;
      height: 45px;
      border: 1px solid #ddd;
      border-radius: 25px;
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: #fff;
      margin-right: 10px;
      font-size: 16px;
      color: #333;
    }
    
    .recommend-btn {
      flex: 1;
      height: 45px;
      background-color: #ff6a9c;
      border-radius: 25px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 16px;
      color: #fff;
    }
  }

  .filter-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    z-index: 1000;
    animation: fadeIn 0.3s ease-in-out;
    
    &.closing {
      animation: fadeOut 0.3s ease-in-out;
    }

    .filter-content {
      background-color: #fff;
      border-radius: 15px 15px 0 0;
      width: 100%;
      max-height: 70vh;
      box-shadow: 0 -5px 20px rgba(0, 0, 0, 0.2);
      display: flex;
      flex-direction: column;
      animation: slideUp 0.3s ease-out;
      
      &.closing {
        animation: slideDown 0.3s ease-in;
      }

      .filter-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px 20px;
        border-bottom: 1px solid #eee;

        .filter-title {
          font-size: 20px;
          font-weight: bold;
          color: #333;
        }

        .close-btn {
          font-size: 28px;
          color: #999;
          padding: 5px;
          width: 30px;
          height: 30px;
          display: flex;
          align-items: center;
          justify-content: center;
          border-radius: 15px;
          
          &:hover {
            background-color: #f5f5f5;
          }
        }
      }

      .filter-body {
        padding: 15px 20px;
        flex-grow: 1;

        // 标签筛选区
        .tag-filter-section {
          margin-bottom: 15px;
          
          .tag-filter-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            
            .tag-filter-title {
              font-size: 16px;
              color: #333;
              font-weight: normal;
            }
            
            .tag-dropdown-container {
              display: flex;
              align-items: center;
              cursor: pointer;
              
              .tag-dropdown-btn {
                background-color: transparent;
                border: 1px solid #f29cc8;
                border-radius: 8px;
                padding: 6px 12px;
                
                .tag-dropdown-text {
                  color: #eb4196;
                  font-size: 14px;
                }
              }
              
              .tag-dropdown-arrow {
                width: 18px;
                height: 18px;
                margin-left: 8px;
              }
            }
          }
        }
        
        // 分隔线
        .filter-divider {
          height: 1px;
          background-color: #f0f0f0;
          margin: 15px 0;
        }
        
                 // 条件筛选区
         .condition-filter-section {
           .condition-filter-title {
             font-size: 14px;
             color: #333;
             font-weight: normal;
             text-align: left;
             display: block;
             margin-bottom: 10px;
           }
           
           .slider-section {
             margin-bottom: 15px;
             
             .slider-header {
               margin-bottom: 8px;
               
               .slider-label {
                 font-size: 14px;
                 color: #333;
                 font-weight: normal;
                 margin-bottom: 5px;
               }
               
               .slider-value {
                 font-size: 14px;
                 color: #333;
                 font-weight: normal;
                 text-align: center;
                 display: block;
               }
             }
             
             .slider-container {
               display: flex;
               flex-direction: column;
               
               .slider-wrapper {
                 height: 25px;
                 position: relative;
                 margin: 0 15px;
                 display: flex;
                 align-items: center;
                 
                 .slider-track {
                   position: absolute;
                   top: 50%;
                   left: 0;
                   right: 0;
                   height: 2px;
                   background-color: #e0e0e0;
                   transform: translateY(-50%);
                 }
                 
                 .slider-range {
                   position: absolute;
                   top: 50%;
                   height: 2px;
                   background-color: #ff6a9c;
                   transform: translateY(-50%);
                 }
                 
                 .slider-thumb {
                   position: absolute;
                   top: 50%;
                   width: 18px;
                   height: 18px;
                   background-color: #ff6a9c;
                   border: 1px solid #ff6a9c;
                   border-radius: 50%;
                   box-sizing: border-box;
                   padding: 3px;
                   transform: translate(-50%, -50%);
                   cursor: pointer;
                   transition: all 0.2s ease;
                   
                   &:hover {
                     transform: translate(-50%, -50%) scale(1.1);
                   }
                   
                   &:active {
                     transform: translate(-50%, -50%) scale(1.2);
                   }
                 }
               }
               
               .slider-values {
                 display: flex;
                 justify-content: space-between;
                 padding: 5px 15px 0;
                 
                 .slider-min, .slider-max {
                   font-size: 14px;
                   color: #666;
                 }
               }
             }
           }
         }
      }

      .filter-footer {
        display: flex;
        justify-content: space-between;
        padding: 8px 20px 15px 20px;
        border-top: none;

        .clear-btn, .confirm-btn {
          flex: 1;
          height: 40px;
          border-radius: 20px;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 16px;
          cursor: pointer;
          transition: all 0.2s ease;
          border: none;

          &:hover {
            opacity: 0.9;
          }
        }

        .clear-btn {
          background-color: #fff;
          color: #333;
          border: 1px solid #a6a6a6;
          margin-right: 10px;
        }

        .confirm-btn {
          background-color: #ff6a9c;
          color: #fff;
          margin-left: 10px;
        }
      }
    }
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

@keyframes slideUp {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0);
  }
}

@keyframes slideDown {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(100%);
  }
}
</style>
